<script lang="ts" setup>
import data from "@/api/remixIcon.json";
const emit = defineEmits(["handle-icon"]);
const state: any = reactive({
  icon: "24-hours-fill",
  layout: "total, prev, next",
  total: 0,
  background: true,
  height: 0,
  selectRows: "",
  queryIcon: [],
  queryForm: {
    pageNum: 1,
    pageSize: 16,
    title: ""
  }
});

// const handleSizeChange: any = (val: string) => {
//   state.queryForm.pageSize = val
//   fetchData()
// }
// const handleCurrentChange: any = (val: string) => {
//   state.queryForm.pageNum = val
//   fetchData()
// }
// const queryData: any = () => {
//   state.queryForm.pageNum = 1
//   fetchData()
// }
const fetchData: any = async () => {
  state.queryIcon = data.datas;
  state.total = data.datas.length;
};
const handleIcon: any = (item: any) => {
  state.icon = item;
  emit("handle-icon", item);
};

onMounted(() => {
  fetchData();
});
</script>

<template>
  <div style="height: 300px; overflow-x: hidden; overflow-y: scroll">
    <el-row :gutter="20">
      <!-- <el-col :span="24">
      <vab-query-form>
        <vab-query-form-top-panel>
          <el-form inline label-width="0" @submit.prevent>
            <el-form-item label="">
              <el-input v-model="state.queryForm.icon" />
            </el-form-item>
            <el-form-item label-width="0">
              <el-button native-type="submit" type="primary" @click="queryData">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-top-panel>
      </vab-query-form>
    </el-col> -->

      <el-col v-for="(item, index) in state.queryIcon" :key="index" :span="6">
        <vab-card shadow="hover" @click="handleIcon(item)">
          <vab-icon :icon="item.icon" />
        </vab-card>
      </el-col>
      <!-- <el-col :span="24">
      <el-pagination
        :background="state.background"
        :current-page="state.queryForm.pageNum"
        :layout="state.layout"
        :page-size="state.queryForm.pageSize"
        :total="state.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-col> -->
    </el-row>
  </div>
</template>

<style lang="scss">
.icon-selector-popper {
  .el-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 20px;
    cursor: pointer;

    i {
      font-size: 28px;
      color: var(--el-color-grey);
      text-align: center;
      vertical-align: middle;
      pointer-events: none;
      cursor: pointer;
    }
  }

  .el-pagination {
    margin: 0;
  }
}
</style>
